
 <%- include('./layout/header.html'); %>
<body>

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
          aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li>
            <a href="#">Dashboard</a>
          </li>
          <li>
            <a href="#">Settings</a>
          </li>
          <li>
            <a href="#">Profile</a>
          </li>
          <li>
            <a href="#">Help</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 col-md-2 sidebar">
        <ul class="nav nav-sidebar">
          <li class="active">
            <a href="#">Overview
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li>
            <a href="#">Reports</a>
          </li>
          <li>
            <a href="#">Analytics</a>
          </li>
          <li>
            <a href="#">Export</a>
          </li>
        </ul>

      </div>
      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

        <div class="row">

          <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
              <ul class="media-list">
                <li class="media">
                  <div class="media-top">
                    <a href="#">
                      <img class="media-object img-responsive" src="images/1.jpg" alt="...">
                    </a>
                  </div>
                  <div class="media-body moive">
                    <p>电影：肖申克的救赎</p>
                    <p>年份：2005年</p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
              <ul class="media-list">
                <li class="media">
                  <div class="media-top">
                    <a href="#">
                      <img class="media-object img-responsive" src="images/1.jpg" alt="...">
                    </a>
                  </div>
                  <div class="media-body moive">
                    <p>电影：肖申克的救赎</p>
                    <p>年份：2005年</p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
              <ul class="media-list">
                <li class="media">
                  <div class="media-top">
                    <a href="#">
                      <img class="media-object img-responsive" src="images/1.jpg" alt="...">
                    </a>
                  </div>
                  <div class="media-body moive">
                    <p>电影：肖申克的救赎</p>
                    <p>年份：2005年</p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
              <ul class="media-list">
                <li class="media">
                  <div class="media-top">
                    <a href="#">
                      <img class="media-object img-responsive" src="images/1.jpg" alt="...">
                    </a>
                  </div>
                  <div class="media-body moive">
                    <p>电影：肖申克的救赎</p>
                    <p>年份：2005年</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>

        </div>
        <div class="row">

          <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
              <ul class="media-list">
                <li class="media">
                  <div class="media-top">
                    <a href="#">
                      <img class="media-object img-responsive" src="images/1.jpg" alt="...">
                    </a>
                  </div>
                  <div class="media-body">
                    <p>电影：肖申克的救赎</p>
                    <p>年份：2005年</p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
              <ul class="media-list">
                <li class="media">
                  <div class="media-top">
                    <a href="#">
                      <img class="media-object img-responsive" src="images/1.jpg" alt="...">
                    </a>
                  </div>
                  <div class="media-body moive">
                    <p>电影：肖申克的救赎</p>
                    <p>年份：2005年</p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
              <ul class="media-list">
                <li class="media">
                  <div class="media-top">
                    <a href="#">
                      <img class="media-object img-responsive" src="images/1.jpg" alt="...">
                    </a>
                  </div>
                  <div class="media-body moive">
                    <p>电影：肖申克的救赎</p>
                    <p>年份：2005年</p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
              <ul class="media-list">
                <li class="media">
                  <div class="media-top">
                    <a href="#">
                      <img class="media-object img-responsive" src="images/1.jpg" alt="...">
                    </a>
                  </div>
                  <div class="media-body moive">
                    <p>电影：肖申克的救赎</p>
                    <p>年份：2005年</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>

        </div>

      </div>
    </div>
    <div id="playerModal" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
          <div class="modal-body" id="player-container">
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap core JavaScript
    ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
  <script>
    $(function () {
      console.log('this is jquery loaded...');
      $('li.media img').click(function () {
        $(this).attr('data-toggle', "modal").attr('data-target', "#playerModal")
        const dp = new DPlayer({
          container: document.getElementById('player-container'),
          theme: '#FADFA3',
          atuoplay: true,
          video: {
            url: 'videos/1.mp4',
            pic: 'images/1.jpg',
          },
        });
      })
    })
  </script>
</body>

</html>